<template>
  <div class="operateForm">
    <!-- <div style="text-align: left; margin-top: 20px">
      <el-button size="mini" type="success" icon="el-icon-view">预览</el-button>
    </div> -->
    <editTableNew
      :hideBtn="hideBtn"
      :tableSetting="preparaTable"
      :mustColumn="mustColumn"
      ref="preparaTable"
      @changeTableData="changeTableData"
    ></editTableNew>
    <editTableNew
      :hideBtn="hideBtn"
      :tableSetting="processTable"
      :mustColumn="mustColumn"
      ref="processTable"
    ></editTableNew>
    <div class="instruction">
      <span class="title">作业指导书:</span>
      <el-button
        size="mini"
        type="primary"
        v-if="!hideBtn"
        icon="el-icon-plus"
        @click="openInstruction"
        >关联</el-button
      >
      <div
        style="margin: 10px 0 0 88px"
        v-for="(item, i) in instructionList"
        :key="i"
      >
        <div class="file-boder">
          <span class="el-icon-document"></span>{{ item.instructionName }}
          <span class="upload-btn-in">
            <el-button
              type="text"
              size="mini"
              icon="el-icon-download"
              @click="downloadFile(item, i)"
              title="下载"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-view"
              v-if="item.instructionId"
              @click="preFile(item)"
              title="预览"
            ></el-button>
            <el-button
              type="text"
              size="mini"
              icon="el-icon-delete"
              @click="removeFile(item, i)"
              title="移除"
              v-if="!hideBtn"
            ></el-button>
          </span>
        </div>
      </div>
    </div>
    <dialogPublic
      :title="'选择标准'"
      :show.sync="show"
      @doSubmit="selectStandard"
      @doClose="() => (show = false)"
    >
      <standardRelatedPage
        :typeId="typeId"
        v-if="show"
        ref="standardRelatedPage"
      />
    </dialogPublic>
    <dialogPublic
      :title="'选择作业指导书'"
      :show.sync="showInstaruction"
      @doSubmit="selectInstruction"
      @doClose="() => (showInstaruction = false)"
    >
      <instructionRelatedPage
        v-if="showInstaruction"
        ref="instructionRelatedPage"
      />
    </dialogPublic>
    <dialogPublic
      :title="'文件预览'"
      :show.sync="showPreview"
      appendTobody
      fullscreen
      noFootBtn
      @doClose="() => (showPreview = false)"
    >
      <preview :fileObj="currentAttach" v-if="showPreview"></preview>
    </dialogPublic>
  </div>
</template>

<script>
import standardRelatedPage from "@/views/standardManagement/operateStandard/experimentalStandard/StandardRelatedPage.vue";
import instructionRelatedPage from "@/views/standardManagement/workInstructionLibrary/instructionRelatedPage.vue";
import preview from "@/components/attach/preview";
export default {
  props: {
    operateForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    deptIds: {
      type: Array,
      default: () => {
        return [];
      },
    },
    hideBtn: {
      type: Boolean,
      default: false,
    },
  },
  components: { standardRelatedPage, instructionRelatedPage, preview },
  data() {
    return {
      show: false,
      showInstaruction: false,
      showPreview: false,
      currentRow: null,
      currentAttach: {},
      disabled: false,
      mustColumn:[1,2],
      preparaTable: {
        btnArr: ["add", "edit"],
        column: [
          {
            label: "类别",
            textAlign: "center",
            type: "text",
            prop: "type",
            required: true,
          },
          {
            label: "名称",
            textAlign: "center",
            prop: "tools",
            type: "textarea",
            autosize: true,
            required: true,
          },
        ],
        title: "作业准备:",
        data: [],
        select: false,
        maxHeight: "100%",
        hideBtn: false,
        buttonArr: [
          {
            name: "删除",
            isShow: (row) => {
              return true;
            },
            methods: (row, index) => {
              this.preparaTable.data.splice(index, 1);
            },
          },
        ],
      },
      processTable: {
        btnArr: ["add", "edit"],
        column: [
          {
            label: "设备",
            textAlign: "center",
            type: "device",
            prop: "equipmentName",
            idsStr: "equipmentId",
            filterConfig: ["filterManagerUnit", "filterStandard"], //过滤条件：hasManagerUnit:该设备是否关联单位，filterManagerUnit:筛选指定单位的设备,filterStandard:关联了标准的设备
            managerUnit: [], //指定过滤的设备管理单位id filterConfig包含filterManagerUnit的时候使用
            standardType: "experiment",
            required: true,
            readonly: true,
            beforeMethod: (formData, item) => {
              item.managerUnit = this.deptIds;
              return true;
            },
            methods: (data, row) => {
              row.typeId = data[0].typeId;
              this.typeId = row.typeId;
            },
          },
          {
            label: "作业标准",
            textAlign: "center",
            type: "click",
            icon: "el-icon-s-order",
            prop: "workName",
            required: true,
            readonly: true,
            methods: (row, index) => {
              //debugger
              if (row.typeId) {
                this.currentRow = row;
                this.show = true;
              } else {
                this.$message.warning("请先选择设备");
              }
            },
          },
        ],
        title: "作业过程:",
        data: [],
        select: false,
        maxHeight: "100%",
        hideBtn: false,
        buttonArr: [
          {
            name: "删除",
            isShow: (row) => {
              return true;
            },
            methods: (row, index) => {
              this.processTable.data.splice(index, 1);
            },
          },
        ],
      },
      //作业指导书列表
      instructionList: [],
      typeId: null,
      typeObj: {
        imge: ["jpg", "jpeg", "gif", "bmp", "png"],
        pdf: ["pdf"],
        video: ["mp4", "m2v", "mkv", "rmvb", "wmv", "avi", "flv", "mov", "m4v"],
        html: ["htm", "html"],
        docx: ["doc", "docx", "docm", "dotx", "dotm"],
        xlsx: ["xls", "xlsx", "xlsm", "xltx", "xltm", "xlsb", "xlam"],
        // txt:["txt"],
        pptx: ["ppt", "pptx", "pot", "potx", "pptm", "ppsx", "ppsm"],
        zip: ["zip", "rar", "7z", "7-zip", "tar", "gzip", "bz2", "jar"],
      },
    };
  },
  created() {
    if (JSON.stringify(this.operateForm) != "{}") {
      this.init(this.operateForm);
    }
  },
  watch: {
    operateForm: {
      handler(val) {
        if (JSON.stringify(val) != "{}") {
          this.init(val);
        }
      },
    },
    deptIds: {
      handler(val) {
        this.$set(this.processTable.column[0], "managerUnit", val);
      },
    },
  },
  methods: {
    init(val) {
      let workArr = val.workReadys
        ? JSON.parse(JSON.stringify(val.workReadys))
        : [];
      workArr.forEach((item, i) => {
        item.editable = false;
        item.rowIndex = i;
      });
      let standards = val.standards
        ? JSON.parse(JSON.stringify(val.standards))
        : [];
      standards.forEach((item, i) => {
        item.editable = false;
        item.rowIndex = i;
      });
      this.$set(this.preparaTable, "data", workArr);
      this.$set(this.processTable, "data", standards);
      this.instructionList = val.instructions;
    },
    changeTableData(val) {
      this.$set(this.preparaTable, "data", val);
    },
    //选择标准
    selectStandard() {
      let data = this.$refs.standardRelatedPage.getselectData();
      this.currentRow.workName = data.name;
      this.currentRow.workId = data.id;
      this.show = false;
    },
    //打开关联作业指导书
    openInstruction() {
      this.showInstaruction = true;
    },
    //选择作业指导书
    selectInstruction() {
      let data = this.$refs.instructionRelatedPage.getselectData();
      this.instructionList = data.map((item) => {
        const obj = {
          instructionId: item.path,
          instructionName: item.name,
          extension: item.extension,
        };
        return obj;
      });
      this.showInstaruction = false;
    },
    //预览
    preFile(file) {
      let { extension, path } = file;
      let type = "";
      for (const key in this.typeObj) {
        //循环遍历typeObj
        let arr = this.typeObj[key];
        if (arr.includes(extension)) {
          //比较找到typeObj相应的后缀名，从而判断它属于哪个类型
          type = key;
        }
      }
      if (["imge", "pdf", "video", "html"].includes(type)) {
        let row = JSON.parse(JSON.stringify(file));
        row.id = row.instructionId;
        this.currentAttach = row;
        this.showPreview = true;
      } else {
        this.$confirm(`该文件暂不支持预览，是否直接下载？`, "提示", {
          confirmButtonText: "立即下载",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.downloadFile(file);
        });
      }
    },
    // 点击下载
    downloadFile(row) {
      let fileName = row.instructionName;
      this.$utils.downloadFile(row.instructionId, fileName);
    },
    //移除作业指导书
    removeFile(item, i) {
      this.instructionList.splice(i, 1);
    },
    //获取作业表单的所有信息
    async getOperateInfo() {
      try {
        const obj = {};
        obj.workReadys = await this.$refs.preparaTable.getTableData();
        obj.standards = await this.$refs.processTable.getTableData();
        obj.instructions = this.instructionList;
        // if (obj.workReadys.length==0) {
        //   throw "作业准备不能为空"
        // } else if(obj.standards.length==0) {
        //   throw "作业过程不能为空"
        // }
        return obj;
      } catch (error) {
        this.$message.warning(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.operateForm {
  width: 100%;
  height: 100%;
  text-align: center;
  .instruction {
    text-align: left;
    margin: 10px 0;
    .title {
      font-weight: bold;
      margin: 0 10px;
    }
    .file-boder {
      width: 30%;
      height: 40px;
      line-height: 40px;
      border: 1px solid #d7d7d7;
      position: relative;
      .upload-btn-in {
        position: absolute;
        right: 5px;
      }
    }
  }
}
</style>